<template>
    <div>
        <div class="mapWrap">
            <div class="left">
                <img src="@/assets/img/contact/logo11@2x.png" alt="logo">
                <p>四川省威盾新材料有限公司</p>
                <p>-</p>
                <p>地址：四川省成都市新都区清渔街171号</p>
                <p>邮编：610000</p>
                <p>传真：028-34156556</p>
            </div>
            <div class="right" id="map"></div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted(){
            const icon = require('@/assets/img/contact/logo12.png');
            // 百度地图API功能
            var map = new BMap.Map("map");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(104.05413,30.949472), 16);  // 初始化地图,设置中心点坐标和地图级别
            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));
                	  
            map.setCurrentCity("成都");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            //创建小狐狸
            var pt = new BMap.Point(104.05413,30.949472);
            var myIcon = new BMap.Icon(icon, new BMap.Size(48,48));
            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
            map.addOverlay(marker2);    
        }
    }
</script>

<style lang="less" scoped>
.mapWrap {
    height: 400px;
    margin-bottom: 100px;
    display: flex;
    .left {
        box-sizing: border-box;
        flex: 0 0 419px;
        background-color: #1B75BD;
        padding: 60px 30px;
        text-align: left;
        img {
            width: 359px;
            height: 115px;
        }
        p {
            color: rgba(255,255,255,.5);
            font-size:14px;
            font-weight:400;
            line-height:1;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            &:nth-of-type(1) {
                color: #fff;
                font-size: 20px;
                margin-bottom: 9px;
            }
            &:nth-of-type(2) {
                position: relative;
                &::after {
                    content: "";
                    position: absolute;
                    width: 72px;
                    height: 2px;
                    background-color: #fff;
                    left: 0;
                    bottom:5px;
                }
            }
        }
    }
    .right {
        flex:0 0 860px;
        min-width: 860px;
    }
}
</style>